<template>
    <bar :totalQuestions="items.length" />
    <div class="list-container">
        <div class="list-item" v-for="(item, index) in items" :key="index" >
            <div class="item-content" @click="createNewQADialog(item.name, 2)">
                <p class="item-title">{{item.chapter}} {{item.name}}</p>
            </div>
            <div class="item-chapter">
                {{item.date}}
            </div>
        </div>
    </div>
  <div style="display: flex; justify-content: center;">
    <Sidebar />
  </div>
</template>

<script setup lang="ts">
import Bar from './components/bar.vue';
import Sidebar from '@/components/Sidebar.vue';
import { reactive, ref } from 'vue'
import axios from 'axios'
import router from '@/router'

const items = reactive([
  {
    name: '分治法的基本思想',
    date: '2024.9.18',
    chapter: '2.2'
  },
  {
    name: '递归的概念',
    date: '2024.9.18',
    chapter: '2.1'
  },
  {
    name: 'NP完全性理论',
    date: '2024.9.15',
    chapter: '1.3'
  },
  {
    name: '算法复杂度分析',
    date: '2024.9.15',
    chapter: '1.2'
  },
  {
    name: '算法与程序',
    date: '2024.9.15',
    chapter: '1.1'
  }
])
const nowTitleId = ref(-1)
const messages = reactive([])
const dialogs = reactive([])

const getDialog = async () => {
  dialogs.splice(0)
  await axios.get('student/AI/allConversation')
    .then(res => {
      console.log(res.data.data)
      for (let i = 0; i < res.data.data.length; i ++) {
        dialogs.push({
          titleId: res.data.data[i].titleId,
          title: res.data.data[i].title,
          date: res.data.data[i].newTime,
          total: res.data.data[i].total
        })
      }
    })
}
const changeDialog = async (titleId) => {
  router.push('/chat/' + titleId)
}

const createNewQADialog = async (createTitle: string, type: number) => {
  let tempTitleId = nowTitleId.value
  await axios.get('student/AI/nowTitleId')
    .then(res => {
      console.log(res.data.data)
      tempTitleId = res.data.data
      messages.splice(0)
    })
  console.log('tempTitleId', tempTitleId)
  if (tempTitleId != nowTitleId.value) {
    await axios.post('student/AI/createConversation', { titleId: tempTitleId, title: createTitle, moduleId: type })
      .then(res => {
        getDialog()
        nowTitleId.value = tempTitleId
        changeDialog(tempTitleId)
      })
  }
}

</script>

<style scoped>
.list-container {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

.list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8%;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 8px;
}

.item-content {
    display: flex;
    flex-direction: column;
}

.item-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0;
}


.item-chapter {
    font-size: 16px;
    color: #666;
}

</style>
